<script setup lang="ts">
import { ref } from 'vue'

interface tData {
  id: number,
  title: string,
  want: boolean,
  isComplete: boolean
}

const tableData = ref<[tData]>([
  {
    id: 0,
    title: '事件一',
    want: true,
    isComplete: false
  },
  {
    id: 1,
    title: '事件二',
    want: true,
    isComplete: true
  },
  {
    id: 2,
    title: '事件三',
    want: false,
    isComplete: false
  }
])

// 不想做了
const setDown = (id: number, status = true) => {
  tableData.value = tableData.value.map(o => {
    if (o.id === id) {
      return status ? { ...o, want: false } : { ...o, want: true }
    }
    return o
  })
}

// 完成
const complete = (id: number, status = true) => {
  tableData.value = tableData.value.map(o => {
    if (o.id === id) {
      return status ? { ...o, isComplete: true } : { ...o, isComplete: false }
    }
    return o
  })
}

</script>

<template>
  <div>
    <el-row :gutter="30" justify="center">
      <el-col :span="8">
        <el-card class="box_card">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="title" label="任务">
              <template #default="scope">
                <span :class="{ active: scope.row.isComplete, down: !scope.row.want }">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="完成情况">
              <template #default="scope">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <div v-if="!scope.row.isComplete" class="flex">
                      <el-button v-if="scope.row.want" type="danger" size="small"
                        @click="setDown(scope.row.id)">不想做</el-button>
                      <el-button v-else type="primary" size="small" @click="setDown(scope.row.id, false)">想做</el-button>
                    </div>

                  </el-col>

                  <el-col :span="12">
                    <div v-if="scope.row.want" class="flex">
                      <el-button v-if="!scope.row.isComplete" type="success" size="small"
                        @click="complete(scope.row.id)">完成</el-button>
                      <el-button v-else type="info" size="small" @click="complete(scope.row.id, false)">不算</el-button>
                    </div>

                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style lang='scss' scoped>
.box_card {
  min-width: 500px;

  .active,
  .down {
    color: #ff5b5b;
    text-decoration: line-through;
  }

  .down {
    color: #999;
  }

  .operate {
    justify-content: space-between;
  }
}
</style>